<template>
  <div style="text-align:center,background-color:#6699cc;height:75px;">
    <div style="width=!00%;height:20px"></div>
    <p class="h4" align="center" style="vertical-align:middle;"><b>人员考勤</b></p>
  </div>
  <div>
  <form>
    <div class="form-group">
      <label><img src="../../../static/optionright.png" width="25" height="25"></img>&nbsp;
        日期：</label>
      <datepicker placeholder="日期"
        :value.sync="f_date"
        :disabled-days-of-Week="[]"
        :format="'yyyy-MM-dd'"
        :show-reset-button="false">
      </datepicker>
    </div>
    <div class="form-group">
      <label><img src="../../../static/optionright.png" width="25" height="25"></img>&nbsp;职工姓名：</label>
      <v-select id="f_upload_state" :value.sync="f_emp"
      :options='f_personnels' placeholder="请选择职工姓名"
      close-on-select clear-button></v-select>
    </div>
    <div class="form-group">
    上班时间:
    <input type="time" class="form-group" v-model="timeToWork">
    </div>
    <div class="form-group">
    下班时间:
    <input type="time" class="form-group" v-model="timeToGo">
    </div>
    <button type="button" class="btn btn-success" @click="search">查询</button>

    <data-grid :model="model" partial='list' v-ref:grid>
      <template partial='head'>
        <tr>
        <th>姓名</th>
        <th>上班时间</th>
        <th>下班时间</th>
        <th>状态</th>
        </tr>
      </template>
      <template partial='body'>
        <td>{{row.f_user_name}}</td>
        <td>{{row.f_signin_time}}</td>
        <td>{{row.f_knockoff_time}}</td>
        <td>{{row.f_state}}</td>
      </template>
    </data-grid>
  </form>
  <div style="height:50px;"></div>
  </div>
</template>

<script>
import co from 'co'
import Vue from 'vue'
import Datepicker from 'vue-strap/src/Datepicker'
import * as Util from '../Util'

let fetchPersonnel = function * (self) {
    let result = yield self.$post(Vue.url + 'sql/得到所长管辖的员工?pageNo=1&pageSize=9999', {
        data: {
            id: Vue.user.id,
            org_id: Vue.user.parentid
        }
    }, {
        resolveMsg: null,
        rejectMsg: '提取数据出错'
    })
    result.data.forEach(function(item) {
      self.f_personnels.push(item)
    })
}

let fetchAttendance = function * (self) {
    let result = yield self.$post(Vue.url + 'sql/提取考勤信息?pageNo=1&pageSize=9999', {
        data: {
            id: Vue.user.id,
            org_id: Vue.user.parentid,
            f_personnels: self.f_emp[0],
            f_date: self.f_date
        }
    }, {
        resolveMsg: null,
        rejectMsg: '提取考勤信息出错'
    })

    for (var row of result.data) {
      Util.getAttendanceState(row, self.timeToWork, self.timeToGo)
    }

    self.$set("model.rows", result.data)
}

export default {
  title: '考勤页面',
  data() {
    return {
      model : {},
      f_personnels: [{label:'全部', value: '0'}],
      f_date: Util.toStandardDateString(),
      f_emp: ['0'],
      timeToGo: '18:00:00',
      timeToWork: '08:00:00'
    }
  },
  ready() {
    let fp = fetchPersonnel(this)
    co(fp)
  },
  methods: {
    search() {
      if(!this.timeToGo || !this.timeToWork)
        HostApp.alert('请检查上下班时间！')
      let fa = fetchAttendance(this)
      co(fa)
    }
  }
}
</script>
